import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Picker, Swiper, SwiperItem } from '@tarojs/components'
import {AtList, AtListItem, AtInput, AtButton, AtToast} from 'taro-ui'
import './createCase.scss'
import reactMixin  from 'react-mixin'
import myJs from './createCaseJs.js'
import app from '../../../main';

export default class CreateCase extends Component {
    constructor () { 
        super(...arguments); 
        this.state = this.getData(); 
    }
    config = {
        navigationBarTitleText: '添加病历'
    }

    init() {
        this.setState({
            doctor_id: this.$router.params.doctor_id,
            genderRang: ['男', '女'],
            genderChecked: '',
            
            marryRang: ["未婚", "已婚", "离婚", "丧偶"],
            message: '',
            isOpened: false,
            cityValue: [0, 0]
        });

        this.allProvinces();
    }

    onPickerChange(name, data, event) {
        var names = name.split('.');
        var n = names[0];
        var temp = this.state;
        for(var i = 0; i < names.length - 1; i++) {
            temp = temp[names[i]];
        }

        if(names.length > 1) {
            temp[names[i]] = data[event.detail.value];
            this.setState({n: temp});
        } else {
            this.setState({n: data[event.detail.value]});
        }
    }

    onCityChange = e => {
        console.log('v', e);
        var v0 = this.state.cityRang[0][e.detail.value[0]];
        var v1 = this.state.cityRang[1][e.detail.value[1]];
        if(v0 && v1) {
            this.state.case_detail.province = this.state.cityRang[0][e.detail.value[0]];
            this.state.case_detail.city = this.state.cityRang[1][e.detail.value[1]];

            this.setState({
                case_detail: this.state.case_detail
            })
        }
    }

    onCityColChange(event) {
        console.log('cit',event);
        if(event.detail.column === 0) {
            var v = this.state.cityRang[0][event.detail.value];
            var province_id = this.state.pdata[v];
            this.allCities(province_id);
        }
    }

    showToast(text) {
        this.setState({
            message: text,
            isOpened: true
        });
    }

    toastClose() {
        this.setState({
            isOpened: false
        });
    }

    submit() {
        if(!this.state.case_detail.patient_name) {
            this.showToast('请填写姓名');
            return;
        }

        if(!this.state.case_detail.gender) {
            this.showToast('请选择性别');
            return;
        }

        if(!this.state.case_detail.birthday) {
            this.showToast('请选择出生日期');
            return;
        }

        var id = 1;

        this.navigateTo("../editCase/editCase?id="+id);
    }

    toPatients() {
        console.log(this.$router.params);
        let url = '../selectPatient/selectPatient?type='+this.$router.params.type;
        if (this.$router.params.project_id) {
            url += '&project_id=' + this.$router.params.project_id;
        }
        app.navigateTo(url);
    }

    render () {
        return (
            <View className='createCase'>
                <AtToast onClose={this.toastClose} hasMask={true} isOpened={this.state.isOpened} text={this.state.message} icon="alert-circle"></AtToast>
                <AtList>
                    <AtListItem onClick={this.toPatients.bind(this)} title='快速从已有患者中选择' arrow='right' hasBorder={false} className="class1"/>
                    <AtListItem title='手动填写' className="class3"/>
                </AtList>
                <AtInput value={this.state.case_detail.patient_name} onChange={this.handleChange.bind(this, 'case_detail.patient_name')} title='姓名(必填)' type='text' placeholder='请输入真实姓名' className="class4"/>
                <View className="class2">
                    <Text>性别(必填)</Text>
                    <Picker mode='selector' range={this.state.genderRang} onChange={this.onPickerChange.bind(this, 'case_detail.gender', this.state.genderRang)}>
                        <View className='picker'>
                        {
                            this.state.case_detail.gender ? 
                            <Text>{this.state.case_detail.gender}</Text>: 
                            <Text className="placeholderClass">请选择性别</Text>
                        }
                        </View>
                    </Picker>
                </View>
                <View className="class2">
                    <Text>出生日期(必填)</Text>
                    <Picker mode='date' onChange={this.handleDetailChange.bind(this, 'case_detail.birthday')}>
                        <View className='picker'>
                        {
                            this.state.case_detail.birthday ? 
                            <Text>{this.state.case_detail.birthday}</Text>: 
                            <Text className="placeholderClass">请选择出生日期</Text>
                        }
                        </View>
                    </Picker>
                </View>
         
                
                {false && <AtInput error={false} value={this.state.case_detail.phone} onChange={this.handleChange.bind(this, 'case_detail.phone')} title='手机号' type='phone' placeholder='请输入手机号码' className="class4"/> }
 
                <View className="class2">
                    <Text>居住城市(必填)</Text>
                    <Picker mode='multiSelector' range={this.state.cityRang} value={this.state.cityValue} onColumnChange={this.onCityColChange} onChange={this.onCityChange}>
                        <View className='picker'>
                        {
                            this.state.case_detail.province && this.state.case_detail.city ? 
                            <Text>{this.state.case_detail.province + this.state.case_detail.city}</Text>: 
                            <Text className="placeholderClass">请选择居住城市</Text>
                        }
                        </View>
                    </Picker>
                </View>
        
                {false && <View className="class2">
                    <Text>婚姻状态</Text>
                    <Picker mode='selector' range={this.state.marryRang} onChange={this.onPickerChange.bind(this, 'case_detail.marry_status', this.state.marryRang)}>
                        {
                            this.state.case_detail.marry_status ? 
                            <Text>{this.state.case_detail.marry_status}</Text>: 
                            <Text className="placeholderClass">请选择婚姻状态</Text>
                        }
                    </Picker>
                </View>}
  
                {false && <AtInput value={this.state.case_detail.occupation} onChange={this.handleChange.bind(this, 'case_detail.occupation')} title='职业' type='text' placeholder='请输入患者职业' className="class4"/> }
         
                <AtButton type='primary' size='normal' full={true} className="class5" onClick={this.createCase.bind(this)}>保存</AtButton>
            </View>
        );
    }
}

reactMixin.onClass(CreateCase, myJs);
